import { Example, ExampleCode } from '@/components/Example';

import IconProviderExample from './example'
import IconSwitcher from './IconSwitcher'

## Demo

<IconSwitcher />

## Usage

To customize the icons used in the Amplify UI components, wrap your application with the `IconProvider` component and pass in the icons you want to change. The `icons` prop should be an object mapping icon names to React components. For example:

<Example>
  <IconProviderExample />
  
  <ExampleCode>
    ```jsx file=./example.tsx
    ```
  </ExampleCode>
</Example>

The icons passed to the IconsProvider are `ReactNode`s that get rendered directly. 

The IconProvider component uses React context to make the custom icon set available to child components. Any component inside the IconProvider will have access to the custom icons via an internal hook. You can nest `IconProvider`s in different parts of your application, just like you would with other React contexts if you wanted to change icons in a certain part of your application.


### Components with icons

The components and their icons that can be overridden are:

* [Accordion](../components/accordion)
* [Alert](../components/alert)
* [Checkbox](../components/checkboxfield)
* [FileUploader](../connected-components/storage/fileuploader)
* [Menu](../components/menu)
* [Pagination](../components/pagination)
* [PasswordField](../components/passwordfield)
* [Rating](../components/rating)
* [SearchField](../components/searchfield)
* [SelectField](../components/selectfield)
* [StepperField](../components/stepperfield)

Here is the full list of icons you can customize with the IconProvider

<Example>
<ExampleCode>
```javascript
const icons = {
  alert: {
    close: () => </>,
    info: () => </>,
    error: () => </>,
    warning: () => </>,
    success: () => </>,
  },
  checkbox: {
    indeterminate: () => </>,
    checked: () => </>,
  },
  accordion: {
    more: () => </>,
  },
  field: {
    clear: () => </>,
  },
  menu: {
    menu: () => </>,
  },
  pagination: {
    previous: () => </>,
    next: () => </>,
  },
  passwordField: {
    visibility: () => </>,
    visibilityOff: () => </>,
  },
  rating: {
    filled: () => </>,
    empty: () => </>,
  },
  searchField: {
    search: () => </>,
  },
  select: {
    expand: () => </>,
  },
  stepperField: {
    add: () => </>,
    remove: () => </>,
  },
  storageManager: {
    upload: () => </>,
    remove: () => </>,
    error: () => </>,
    success: () => </>,
    file: () => </>,
  }
}
```
</ExampleCode>
</Example>
